<div ng-if="$ctrl.loading" class="catalog-projects-spinner-container">
  <div class="spinner spinner-inverse spinner-xl"></div>
</div>
<div class="catalog-projects-summary-panel" ng-show="!$ctrl.loading">
  <button ng-if="$ctrl.canCreate" class="create-button btn btn-primary" ng-click="$ctrl.openNewProjectPanel($event)">
    <span class="fa fa-plus"></span>
    <span class="create-button-text">Create Project</span>
  </button>
  <origin-modal-popup class="catalog-create-project" modal-title="Create Project" shown="$ctrl.newProjectPanelShown" on-close="$ctrl.closeNewProjectPanel" reference-element="$ctrl.modalPopupElement">
    <create-project is-dialog="true" redirect-action="$ctrl.onNewProject" on-cancel="$ctrl.closeNewProjectPanel"></create-project>
  </origin-modal-popup>
  <h2 class="summary-title secondary" ng-if="!$ctrl.projects || !$ctrl.projects.length">Getting Started</h2>
  <h2 class="summary-title secondary" ng-if="$ctrl.projects && $ctrl.projects.length">
    <a href="{{$ctrl.projectsUrl}}">My Projects</a>
  </h2>
  <div ng-if="!$ctrl.canCreate">
    <span ng-if="!$ctrl.newProjectMessage">
      A cluster admin can create a project for you by running the command:
      <div class="code-block">
        <code class="projects-instructions-link">oc adm <span class="command-arg">new-project</span> &lt;projectname&gt; <span class="command-arg">--admin={{$ctrl.user.metadata.name || '&lt;YourUsername&gt;'}}</span></code>
      </div>
    </span>
    <span ng-if="$ctrl.newProjectMessage" ng-bind-html="$ctrl.newProjectMessage | linky : '_blank'"></span>
  </div>
  <div ng-if="$ctrl.isProjectListIncomplete">
    <p class="text-muted">
      The complete list of your projects could not be loaded. Type a project name to go to that project.
    </p>
    <form>
      <div class="form-group">
        <label for="typed-project-name">Project Name</label>
        <div class="input-group">
          <input
            class="form-control"
            type="text"
            id="typed-project-name"
            required
            minlength="2"
            ng-model="$ctrl.typedProjectName"
            autocorrect="off"
            autocapitalize="none"
            spellcheck="false">
          <span class="input-group-btn">
            <button class="btn btn-default go-to-project-button"
                    type="submit"
                    ng-disabled="!$ctrl.typedProjectName"
                    ng-click="$ctrl.goToProject($ctrl.typedProjectName)">
              <i class="fa fa-arrow-right" aria-hidden="true"></i>
              <span class="sr-only">Go to Project</span>
            </button>
          </span>
        </div>
      </div>
    </form>
  </div>
  <div ng-if="$ctrl.projects && $ctrl.projects.length" class="catalog-project-summary-list">
    <div class="projects-count">
      <strong>{{$ctrl.projects.length}}</strong>
      of
      <strong>{{$ctrl.totalProjects}}</strong>
      Projects
      <a href="{{$ctrl.projectsUrl}}" class="projects-view-all">View All</a>
    </div>
    <div id="catalog-projects-summary-list">
      <div ng-repeat="project in $ctrl.projects track by (project | uid)" class="project-tile tile-click">
        <div class="dropdown  dropdown-kebab-pf" uib-dropdown="">
          <button class="btn btn-link uib-dropdown-toggle" type="button" id="dropdownKebab" aria-haspopup="true" aria-expanded="true" uib-dropdown-toggle>
            <span class="fa fa-ellipsis-v"></span>
          </button>
          <ul class="uib-dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebab">
            <li><a href="" ng-click="$ctrl.onViewMemebership(project)">View Membership</a></li>
            <li><a href="" ng-click="$ctrl.editProject(project)">Edit Project</a></li>
            <li>
              <delete-project
                  label="Delete Project"
                  project="project"
                  type-name-to-confirm="true"
                  stay-on-current-page="true"
                  success="$ctrl.onDeleteProject">
              </delete-project>
            </li>
          </ul>
        </div>
        <h3 class="project-tile-header">
          <a href="{{project | projectUrl : $ctrl.baseProjectUrl}}" class="project-title tile-target">{{project | displayName}}</a>
          <span ng-if="project.status.phase != 'Active'"
            data-toggle="popover"
            data-trigger="hover"
            data-content="This project has been marked for deletion."
            class="pficon pficon-warning-triangle-o"></span>
        </h3>
        <p class="project-date">
          <span ng-if="project | displayName : true"><span class="word-break" ng-bind-html="project.metadata.name"></span> &ndash;</span>
          created
          <span ng-if="project | annotation : 'openshift.io/requester'">by <span class="word-break" ng-bind-html="project | annotation : 'openshift.io/requester'"></span></span>
          <span am-time-ago="project.metadata.creationTimestamp"></span>
        </p>
        <div class="project-description" ng-if="project | description">
          <truncate-long-text content="project | description" use-word-boundary="true" limit="120"></truncate-long-text>
        </div>
        <origin-modal-popup class="catalog-edit-project" modal-title="Edit Project" shown="$ctrl.editProjectPanelShown && $ctrl.edittingProject === project" on-close="$ctrl.closeEditProjectPanel">
          <edit-project project="$ctrl.edittingProject" is-dialog="true" redirect-action="$ctrl.onEditProject" on-cancel="$ctrl.closeEditProjectPanel"></edit-project>
        </origin-modal-popup>
      </div>
    </div>
  </div>
  <div ng-if="$ctrl.showGetStarted">
    <div class="getting-started-panel">
      <h2 class="secondary" ng-if="$ctrl.projects && $ctrl.projects.length > 0">Getting Started</h2>
      <button ng-if="$ctrl.startTour()" class="getting-started-button btn btn-default hidden-xs" ng-class="{'with-projects': $ctrl.projects && $ctrl.projects.length}" ng-click="$ctrl.handleGettingStartedClick()">
        <span class="fa fa-info-circle fa-2"></span>
        <span class="getting-started-button-text">Take Home Page Tour</span>
      </button>
    </div>
    <div class="resources-panel">
      <ul>
        <li ng-repeat="resource in $ctrl.resourceLinks">
          <a href="{{resource.href}}" target="_blank" title="{{resource.href}}">{{resource.title}}</a>
        </li>
      </ul>
    </div>
  </div>
  <div ng-if="$ctrl.recentlyViewedItems.length">
    <h2 class="secondary">Recently Viewed</h2>
    <div class="services-view">
      <a href="" class="services-item" ng-repeat="item in $ctrl.recentlyViewedItems track by (item.resource | uid)"
           ng-click="$ctrl.orderService(item)">
        <div ng-if="!item.imageUrl" class="services-item-icon">
          <span class="{{item.iconClass}}"></span>
        </div>
        <div ng-if="item.imageUrl" class="services-item-icon services-item-img">
          <img ng-src="{{item.imageUrl}}">
        </div>
        <div class="services-item-name" title="{{item.name}}" aria-hidden="true">{{item.name}}</div>
      </a>
    </div>
  </div>
</div>
